<template>
  <div 
    v-if="visible"
    class="context-menu"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
  >
    <div v-if="node.type === 'folder'" class="menu-section">
      <div class="menu-header">文件夹操作</div>
      <div class="menu-item" @click="addFolder('sibling')">
        <el-icon><FolderAdd /></el-icon>
        <span>添加同级文件夹</span>
      </div>
      <div class="menu-item" @click="addFolder('child')">
        <el-icon><FolderAdd /></el-icon>
        <span>添加子文件夹</span>
      </div>
      <div class="menu-divider"></div>
      <div class="menu-item" @click="startRename">
        <el-icon><Edit /></el-icon>
        <span>重命名</span>
      </div>
      <div class="menu-item" @click="deleteFolder">
        <el-icon><Delete /></el-icon>
        <span>删除文件夹</span>
      </div>
    </div>

    <div v-else class="menu-section">
      <div class="menu-header">文件操作</div>
      <div class="menu-item" @click="showPreview">
        <el-icon><View /></el-icon>
        <span>预览文件</span>
      </div>
      <div class="menu-item" @click="startRename">
        <el-icon><Edit /></el-icon>
        <span>重命名</span>
      </div>
      <div class="menu-item" @click="deleteFile">
        <el-icon><Delete /></el-icon>
        <span>删除文件</span>
      </div>
      <div class="menu-divider"></div>
      <div class="menu-item" @click="downloadFile">
        <el-icon><Download /></el-icon>
        <span>下载文件</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  FolderAdd,
  Edit,
  Delete,
  View,
  Download
} from '@element-plus/icons-vue'

const props = defineProps({
  visible: Boolean,
  position: Object,
  node: Object
})

const emit = defineEmits([
  'close',
  'add-folder',
  'start-rename',
  'delete-folder',
  'show-preview',
  'download-file',
  'delete-file'
])

const addFolder = (position) => {
  emit('add-folder', position)
  emit('close')
}

const startRename = () => {
  emit('start-rename')
  emit('close')
}

const deleteFolder = () => {
  emit('delete-folder')
  emit('close')
}

const showPreview = () => {
  emit('show-preview', props.node)
  emit('close')
}

const downloadFile = () => {
  emit('download-file', props.node)
  emit('close')
}

const deleteFile = () => {
  emit('delete-file', props.node)
  emit('close')
}
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: 200px;
  overflow: hidden;
}

.menu-section {
  padding: 8px 0;
}

.menu-header {
  padding: 8px 16px;
  font-size: 12px;
  color: #909399;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.menu-item:hover {
  background: #f5f7fa;
}

.menu-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.menu-divider {
  height: 1px;
  background: #ebeef5;
  margin: 6px 0;
}
</style>